/* 整体布局 */
.container{
    width: 1600px;
    height: 900px;
    background-image: url(../img/background.png);
    background-repeat:no-repeat;
    background-size:cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
/* 头部布局 */
.container .top{
    width: 1545px;
    height: 148px;
    background-color: rgba(36,109,194,0.4);
    /* padding: 16px 0 17px 31px; */
    display: flex;
    justify-content: space-between;
}

 /* 门户信息展示 */
.container .top .top_one{
    width: 305px;
    height: 115px;
    margin: 20px 16px 28px 17px;
}

.container .top .top_one .top_one_one span{
    line-height: 39px;
    font-size: 36px;
    background-image:-webkit-linear-gradient(bottom,#85D9FF,#85D9FF,#F7FDFF); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    vertical-align: middle;
}

.container .top .top_one .top_one_one img{
    width: 60px;
    height: 39px;
    vertical-align: middle;
    margin-right: 5px;
}

.container .top hr{
    height:1px;
    border:none;
    border-top:1px solid #084475;
    margin: 10px 0;
    border-image:linear-gradient(to right,#084475,#5994C4,#0E427F) 1 10;
}
.container .top .top_one .top_one_two{
    display: flex;
}

.container .top .top_one .top_one_two .top_one_two_con{
    width: 50%;
}
.container .top .top_one .top_one_two .top_one_two_con .top_one_two_con_one{
    width: 50px;
    background-color: rgba(74,144,226,0.3);
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container .top .top_one .top_one_two .top_one_two_con .top_one_two_con_two{
    margin-left: 16px;
    text-align: center;
}

.container .top .top_one .top_one_two .top_one_two_con{
    width: 50%;
    width: 305px;
    display: flex;
    color: #ACD4FA;
}

.container .top .top_one .top_one_two .top_one_two_con .top_one_two_con_two p{
    font-size: 28px;
    color: #ffffff;
}

 /* 安全监控系统 */
 .container .top .top_two{
    margin-top: 20px;
    width: 280px;
    height: 115px;
    background-image: url(../img/top-bg1.png);
    background-repeat:no-repeat;
}
.container .top .top_two .top_two_one{
    font-size: 18px;
    text-align: center;
    margin: 6px;
}
.container .top .top_two .top_two_two{
    width: 261px;
    height: 68px;
    background-color: rgba(12,48,93,0.5);
    margin: auto;
}

.container .top .top_two .top_two_two span{
    text-align: justify;
    color: #DAFAFF;
    margin: 10px 5px;
    line-height: 18px;
    font-size: 13px;
}

 /* 安全监测分析系统 */
 .container .top .top_three{
    width: 280px;
    height: 115px;
    margin-top: 20px;
    background-image: url(../img/top-bg2.png);
    background-repeat:no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container .top .top_three .top_three_one{
    font-size: 18px;
}

 /* 安全监控系统 */
 .container .top .top_four{
    width: 280px;
    height: 115px;
    margin-top: 20px;
    background-image: url(../img/top-bg3.png);
    background-repeat:no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container .top .top_four .top_four_one{
    font-size: 18px;
}

/* 时间显示 */
.container .top .top_five{
    width: 280px;
    height: 115px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container .top .top_five .top_five_one{
    width: 235px;
    height: 34px;
    background-color: #06264D;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 13px;
    color: #9ff2ff;
}

.container .top .top_five .top_five_two{
    margin-top: 10px;
    font-size: 14px;
    color: #327CC7;
    margin-left: -20px;
}




/* 中间布局 */
.container .middle{
    margin: 15px 0;
    width: 1545px;
    height: 416px;
    /* background-color: rgba(36,109,194,0.4); */
    display: flex;
    justify-content: space-between;
}

/* 脆弱资产 */
.container .middle .middle_one{
    width: 393px;
    height: 416px;
    background-color: rgba(74,144,226,0.3);
    padding: 16px;
}

/* 脆弱资产 */
.container .middle .title{
    font-size: 16px;
    padding: 0 0 10px 3px;
}
.container .middle .title span{
   color: #9ff2ff;
}

.container .middle .middle_one .middle_one_one{
    margin-bottom: 20px;
    margin-left: 5px;
}

.container .middle .middle_one .middle_one_one .span_one{
    color: #9ff2ff;
    width: 40%;
}
.container .middle .middle_one .middle_one_one .span_two{
    width: 37%;
    color: #ffffff;
}
.container .middle .middle_one .middle_one_one .span_three{
    width: 52px;
    color: #F8C11C;
    text-align: center;
    background-color: rgba(248,231,28,0.2);
}

.container .middle .middle_two{
    display: flex;
    justify-content: space-around;
    width: 756px;
    margin: 0 72px;
}

.container .middle .middle_two .middle_two_one{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 120px;
}

.container .middle .middle_two .middle_two_one .small_circle img{
    width: 86px;
    height: 86px;
}

.container .middle .middle_two .middle_two_one .small_circle p{
    width: 66px;
    height: 66px;
    background-image: url('../img/border_dotted.png');
    background-repeat: no-repeat;
    line-height: 66px;
    text-align: center;
    margin: -80px auto auto 10px;
    font-size: 36px;
}

.container .middle .middle_two .middle_two_one .small_circle span{
    display: block;
    font-size: 16px;
    margin-top: 20px;
    color: #9FF2FF;
    text-align: center;
}

.container .middle .middle_two .middle_two_one .small_circle img:hover{
    animation:turn 1s linear 1;
}

.container .middle .middle_two .middle_two_two .max_circle{
    width: 398px;
    height: 398px;
    background-image: url('../img/guangyun.png');
    background-repeat: no-repeat;
}
.container .middle .middle_two .middle_two_two .max_circle .img_one{
    margin-top: 25px;
    margin-left: 25px;
}
.container .middle .middle_two .middle_two_two .max_circle .img_two{
    position: relative;
    top: -340px;
    left: 200px;
    transform-origin: 0 100%;
    animation:turnone 4s linear infinite;
    width:116px;
    height:160px;
}

.container .middle .middle_two .middle_two_two .max_circle p{
    margin-top: -400px;
    text-align: center;
    font-size: 58px;
}
.container .middle .middle_two .middle_two_two .max_circle span{
    display: block;
    font-size: 18px;
    text-align: center;
}

.container .middle .middle_two .middle_two_two .max_circle .img_one:hover{
    animation:turn 1s linear infinite;
    animation-iteration-count: 1;
}

@keyframes turnone{
    0%{-webkit-transform:rotate(0deg) scale(1);}
    25%{-webkit-transform:rotate(90deg) scale(1);}
    50%{-webkit-transform:rotate(180deg) scale(1);}
    75%{-webkit-transform:rotate(270deg) scale(1);}
    100%{-webkit-transform:rotate(360deg) scale(1);}
}


@keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}

/* 漏洞风险态势 */
.container .middle .middle_three .middle_three_one{
   width: 392px;
   height: 196px;
   background-color: rgba(74,144,226,0.3);
   padding: 16px 16px 0 16px;
}

/* 弱密码 */
.container .middle .middle_three .middle_three_two{
    margin-top: 10px;
    width: 392px;
    height: 213px;
    background-color: rgba(74,144,226,0.3);
    padding: 16px 16px 0 16px;
 }

/* 底部布局 */
.container .bottom{
    width: 1545px;
    display: flex;
    justify-content: space-between;
}

.container .bottom .title{
    font-size: 16px;
    padding: 0 0 10px 3px;
}
.container .bottom .title span{
   color: #9ff2ff;
}
.container hr{
    height:1px;border:none;border-top:1px solid #5994C4;
    border-image:linear-gradient(to right,#5994C4,#0E427F) 1 10;
}

.container .hr_btm{
    margin-bottom: 20px;
}

/* 实时性脆弱性检测 */
.container .bottom .bottom_one{
    padding: 16px;
    width: 677px;
    height: 295px;
}

.container .bottom .bottom_one .bottom_one_title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: rgba(74,144,226,0.2);
    height: 26px;
    align-items: center;
}

.container .bottom .bottom_one .bottom_one_title span.date_span{
    width: 21%;
}

.container .bottom .bottom_one .bottom_one_title span{
    width: 15%;
    text-align: center;
}


.container .bottom .bottom_one .bottom_one_content{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.container .bottom .bottom_one .bottom_one_content span.date_span{
    width: 21%;
}

.container .bottom .bottom_one .bottom_one_content span{
    width: 15%;
    text-align: center;
    display: inline-block;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow:ellipsis;
}

/* 高危安全事件TOP5 */
.container .bottom .bottom_two{
    padding: 16px;
    width: 444px;
    height: 295px;
}

.container .bottom .bottom_two .bottom_two_title{
    background-color: rgba(74,144,226,0.2);
    height: 26px;
    align-items: center;
}

.container .flex_1{
    width: 25%;
    text-align: center;
}

.container .flex_2{
    width: 50%;
    text-align: center;
}


/* web明文传输 */
.container .bottom .bottom_three{
    padding: 16px;
    width: 392px;
    height: 295px;
}

.container .bg_pub{
    background-color: rgba(74,144,226,0.3);
}

.container .active_text{
    color: #F8C11C;
}

.container .text_surplus_hide{
    text-align: center;
    display: inline-block;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow:ellipsis;
}

.container .pingfen{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}






